<template>
<card class="task-con">
    <p slot="title">新建工单</p>
    <span slot="extra" @click.prevent="remove">
        <Icon type="close-round" color="#495060"></Icon>
    </span>
    <div>
        <Row  class="user-info-con">
            <Col span="6">
                <span>来电号码:{{data.telNo}}</span>  
            </Col>
            
            <Col span="6">
                <span>学生ID：{{data.stuId}}</span> 
            </Col>
            <Col span="6">
                <span>学生姓名：{{data.stuName}}</span> 
            </Col>
            <Col span="6">
                <span>用户姓名:{{data.customerName}}</span>
            </Col>
        </Row>
        <Row  class="user-info-con">
            <Col span="12">
                <span>问题类型:{{data.question_type | getQuestionTypeStr}}</span>  
            </Col>
        </Row>
    </div>
    <div class="line"></div>
    <taskActionForm :data="data" :func="{'remove':remove}"></taskActionForm>
</card>
</template>
<style scoped>
    .task-con {
        width: 800px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -400px;
        margin-top: -258px;
        z-index: 20000;
        text-align: left;
        box-shadow: 0 0 10px 1px;
        font-size: 12px;
    }
    
    .ivu-card:hover {
        box-shadow: 0 0 10px 1px;
    }
    
    .line {
        width: 100%;
        height: 1px;
        border-top: solid 1px #eaeaea;
        margin: 10px 0 10px 0;
    }
    
    .user-info-con {
        text-align: left;
        line-height: 30px;
        font-size: 12px;
    }
    
    .user-info-con span {
        white-space: nowrap;
    }
    
    .more-link {
        display: flex;
        justify-content: flex-start;
        font-size: 12px;
    }
</style>
<script>
    import userInfo from 'components/user/userInfo.vue'
    import taskActionForm from './taskActionForm.vue'
    export default {
        name: 'createTask',
        props: {
            data: Object,
            remove: Function
        },
        data() {
            return {
                isHasMore: false
            }
        },
        components: {
            userInfo,
            taskActionForm
        },
        filters: {
            getQuestionTypeStr(question_type_arr) {
                return question_type_arr.join('/')
            }
        }
    }
</script>